<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <#include "/pubHeadStyle.html">
</head>
<body>
<script type="text/html" id="headerManagementUser">
    <form class="layui-form" action="" lay-filter="queryForm" style="margin-top:10px">
        <div class="table-top-filter" style="position: relative;">
            <div class="table-filter-alone">
                <label class="layui-form-label">姓名</label>

                <input style="width:180px;" type="text" class="layui-input filter-value" name="Q_nodeName_SL" placeholder="姓名"/>
            </div>
        </div>
        <a class="layui-btn layui-btn-sm" lay-event="query" style="position: absolute;top: 4px;right: 95px;">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
    </form>
</script>
<div name="userSelectorDiv" style="height: 100%;">
    <input type="hidden" name="nodeList">
    <div class="center" style="height: 100%;">
        <div class="filter-table" style="position: relative;">
            <div style="width: 68%;">
                <table class="layui-hide" id="jumpNodeTable" lay-filter="jumpNodeTable"></table>
            </div>

            <span style="position:absolute;right:10px;top:10px;width:30%">已选择</span>
            <div style="height: 474px;overflow: auto;position:absolute;right:10px;top:38px;width:30%">
                <table class="layui-table" id="UserApps" style="margin: 0">
                    <tbody class="contentDivs">
                    <tr>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--<div class="center">-->
    <!--<div class="filter-table" style="position: relative;">-->
        <!--<table class="layui-table" id="jumpNodeTable" lay-filter="jumpNodeTable">-->
            <!--<tr>-->
                <!--<th><input type="checkbox" id="selectAll"/></th>-->
                <!--<th>节点名称</th>-->
            <!--</tr>-->
            <!--<tr id="nodes"></tr>-->
        <!--</table>-->
        <!--<span style="position:absolute;right:-30px;top:10px;width:30%">已选择</span>-->
        <!--<div style="height: 474px;overflow: auto;position:absolute;right:-30px;top:38px;width:30%">-->
            <!--<table class="layui-table" id="RoleApps" style="margin: 0">-->
                <!--<tbody class="contentDivs">-->
                <!--<tr>-->
                    <!--<td></td>-->
                <!--</tr>-->
                <!--</tbody>-->
            <!--</table>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'form', 'laydate', 'totalFilter','setter','commons','common'], function () {
        var setter = layui.setter
            ,common = layui.common
            ,table = layui.table
            ,$ = layui.jquery
            ,commons = layui.commons
            ,totalFilter=layui.totalFilter;

        var taskId = "${taskId}";

        var nodeList = [];
        var defaultUserList = [];
        if(nodeList.length>0){
            defaultUserList = defaultUserList.concat(nodeList);
        }
        if(layui.nodeList) {
            nodeList.push.apply(nodeList,layui.nodeList)
            $("input[name=nodeList]").val(JSON.stringify(nodeList));
        };
        // 初始化节点表单
        table.render({
            elem: '#jumpNodeTable',
            method: 'post',
            url: serverPath.workflowPath + setter.workflowLinkPath + "task/freeBackNodes",
            page: true,
            height: 'full-10',
            where: {taskId: taskId},
            defaultToolbar:[],
            //toolbar:'#headerManagementUser',
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'nodeId', title: 'ID', sort: true, hide: true},
                    {field: 'nodeName', title: '节点名称',sort: false}
                ]
            ],
            parseData: function (res) {
                var _data = res.data;
                if (_data.length > 0 && nodeList.length > 0) {
                    for (var i = 0; i < _data.length; i++) {
                        var _d = _data[i];
                        for (var j = 0; j < nodeList.length; j++) {
                            var _td = nodeList[j];
                            if (_d.nodeId === _td.nodeId) {
                                _d.LAY_CHECKED = true;
                            }
                        }
                    }
                }
                $(".contentDivs").html("");
                for (var i = 0; i < nodeList.length; i++) {
                    $(".contentDivs").append("<tr><td>" +"<span>" +nodeList[i].nodeName +"</span>"+ " <i selectIds="+"'"+nodeList[i].nodeId+"'"+
                        "class='layui-icon' style='position:absolute;right:12px;cursor: pointer'>&#xe640;</i></td></tr>");
                }
                $("input[name=nodeList]").val(JSON.stringify(nodeList));
            }
        });
        totalFilter.init('jumpNodeTable');
        $(document).on("click",".contentDivs .layui-icon",function() {
            $(this).parent().parent().remove();
            var delData = $(this).attr('selectIds');
            for (var i = 0; i < nodeList.length; i++) {
                if (nodeList[i].nodeId == delData) {
                    nodeList.splice(i, 1);
                }
            }

            table.reload("jumpNodeTable", {
                parseData: function (res) {
                    var _data = res.data;
                    if (_data.length > 0 && nodeList.length > 0) {
                        for (var i = 0; i < _data.length; i++) {
                            var _d = _data[i];
                            for (var j = 0; j < nodeList.length; j++) {
                                var _td = nodeList[j];
                                if (_d.nodeId === _td.nodeId) {
                                    _d.LAY_CHECKED = true;
                                }
                            }
                        }
                    }
                },
                page: {curr: 1}
            });
        });
        table.on('checkbox(jumpNodeTable)', function (obj) {
            var data = obj.data;
            var sel = obj.checked; //复选框状态
            var allS = obj.type; //是否全选
            var msg = {
                nodeName: data.nodeName,
                nodeId: data.nodeId
            };
            var arr_re = JSON.stringify(nodeList).indexOf(JSON.stringify(msg)); //判断有没有
            var arrAll = table.cache.jumpNodeTable;
            var index = 0;
            //全选
            if (allS == 'all') {
                if (sel) {
                    for (var i = 0; i < arrAll.length; i++) {
                        var msgs = {
                            nodeName: arrAll[i].nodeName,
                            nodeId: arrAll[i].nodeId
                        }
                        var arr_res = JSON.stringify(nodeList).indexOf(JSON.stringify(msgs));
                        if (arr_res == -1) {
                            nodeList.push(msgs)
                        }
                    }
                } else {
                    for (var i = 0; i < nodeList.length; i++) {
                        for (var j = 0; j < arrAll.length; j++) {
                            if (nodeList[i].nodeId == arrAll[j].nodeId) {
                                nodeList.splice(i, 1);
                                i--;
                                break;
                            }
                        }
                    }
                }
            } else {
                if (sel) {
                    if (arr_re == -1) {
                        nodeList.push(msg);
                    }
                } else {
                    if (arr_re != -1) {
                        for (var i = 0; i < nodeList.length; i++) {
                            if (nodeList[i].nodeId == msg.nodeId) {
                                index = i;
                                break;
                            }
                        }
                        nodeList.splice(index, 1);
                    }
                }

            }
            $(".contentDivs").html("");
            for (var i = 0; i < nodeList.length; i++) {
                $(".contentDivs").append("<tr><td>" +"<span>" +nodeList[i].nodeName +"</span>"+ " <i selectIds="+"'"+nodeList[i].nodeId+"'"
                    + "class='layui-icon' style='position:absolute;right:12px;cursor: pointer'>&#xe640;</i></td></tr>");
            }
            $("input[name=nodeList]").val(JSON.stringify(nodeList));
        });
        //全部取消
        window.cancelData=function(){
            $(".contentDivs").html("");
            nodeList = [];
            table.reload('jumpNodeTable');
        };
    });
</script>
<style>
    .left {
        width: 26%;
        display: inline-block;
        float: left;
    }

    .center {
        width: 100%;
        display: inline-block;
        float: left;
    }

    ul.ztree {
        background: #fff;
        width: 100%;
        height: 473px;
        overflow: auto;
    }

    .filter-table .layui-form.layui-border-box.layui-table-view {
        position: absolute;
        margin: 0
    }
    .center .layui-table-page{
        padding-left: 2px;
        padding-right: 2px;
        width: 495px;  /*表格分页底部  */
    }
    .contentDivs td{
        height: auto;
        padding-right: 30px;
    }
    .contentDivs span{
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    .center .layui-table-view .layui-table{
        width: 100%; /*表格主体宽度*/
    }
</style>
</body>
</html>